// app global css in Sass form
@import "./util/_width.sass"

body.body--light
  background: #EEF0F8
  height: 100%

a
  text-decoration: none

.q-scrollarea__bar--v,
.q-scrollarea__thumb--v
  width: 6px
  opacity: 0.35
  border-radius: 5px

.container
  width: 100%
  padding-right: 10px
  padding-left: 10px
  margin-right: auto
  margin-left: auto

@media (min-width: 576px)
  .container
    max-width: 540px
@media (min-width: 768px)
  .container
    max-width: 720px
@media (min-width: 992px)
  .container
    max-width: 960px
@media (min-width: 1200px)
  .container
    max-width: 1140px
@media (min-width: 1400px)
  .container
    max-width: 1340px

.text
  &-line2-f
    white-space: inherit !important
    word-break: break-all !important

.my-page
  &-header
    width: 100%
    background: $light
    padding: 15px 10px 12px 10px
    &-subtitle
      font-size: 23px
      margin-top: 10px
    &-goback
      position: relative
      padding-left: 30px
      & i
        position: absolute
        top: 2px
        left: 0px

  &-body
    margin: 10px

.my-table
  background: $light
  & .q-table
    & th,td
      padding: 8px 10px
    &__container
      border-radius: 4px
    &__card
      box-shadow: none
      padding: 0 12px
      & .q-table__top
        padding: 12px 0
      & thead
        & tr
          background: $grey-3
      & tbody
        & td
          height: 40px
          &.action
            & > a
              margin-right: 10px
            & > a:last-child
              margin-right: 0
    &__card-f
      padding: 0
  & .item-circle
    width: 8px
    height: 8px
    float: right
    border-radius: 100%
    border: 2px solid #bbdefb
    margin-right: 6px

.my-search
  padding-left: 15px
  padding-right: 15px
  padding-top: 15px
  padding-bottom: 10px
  & .btn
    margin-top: 18px

.my-dialog
  & .q-toolbar
    &__title
      font-size: 16px
  & .q-form-item
    & .q-field--with-bottom
      padding-bottom: 10px
  & .q-dialog-footer
    & > button
      min-width: 65px
      max-height: 35px

.my-form
  & .q-label
    & .q-icon
      position: relative
      top: -1px
      margin-left: 2px
    &.required::after
      content: "*"
      position: relative
      top: 2px
      margin: 5px
      font-weight: 600
      color: $negative
  & .q-field
    &__bottom--animated
      left: -5px
      bottom: 16px !important
      z-index: 10
      & .q-field__messages
        & div
          width: max-content
          border-radius: 5px
          background: $negative
          color: $light
          padding: 5px
  &.gutter
    & .q-field
      &--with-bottom
        padding-bottom: 0
.my-tabs
  background: $light
  margin-bottom: 10px
  border-radius: 4px
